<!DOCTYPE html>
<html>

<head>
  <title>Canvas表格</title>
  <style>
    canvas {
      border: 1px solid #ddd
    }
  </style>
</head>

<body>
  <canvas id="table" width="800" height="600"></canvas>
  <script>
    const canvas = document.getElementById('table');
    const ctx = canvas.getContext('2d');

    // 表格数据
    const data = [
      ['ID', 'Name', 'Age'],
      [1, '张三', 25],
      [2, '李四', 30]
    ];

    // 绘制表格
    function drawTable() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      const cellWidth = 200, cellHeight = 30;

      // 绘制单元格
      data.forEach((row, rowIdx) => {
        row.forEach((cell, colIdx) => {
          ctx.strokeRect(colIdx * cellWidth, rowIdx * cellHeight, cellWidth, cellHeight);
          ctx.fillText(cell, colIdx * cellWidth + 5, rowIdx * cellHeight + 20);
        });
      });
    }
    drawTable();
  </script>
</body>

</html>
